﻿import MainEcharts from '@/components/common/MainEcharts.vue'
export default {
  components: {
    MainEcharts
  },
  props: ['element', 'select', 'index', 'data'],
  data () {
    return {
      selectWidget: this.select
    }
  },
  computed: {
    getTableColumns: function () {
      let currentTableColumns = []
      if ((this.element.type === 'table') && this.element.tableColumn.length) {
        this.element.tableColumn.forEach(item => {
          if (item.isShow) {
            this.$set(currentTableColumns, currentTableColumns.length, item)
          }
        })
      }
      if (currentTableColumns.length) {
        return currentTableColumns.sort(this.orderByObjAttr('sortNum'))
      } else {
        return []
      }
    }
  },
  methods: {
    // 选中某个元素时
    handleSelectWidget (index) {
      this.selectWidget = this.data.list[index]
    },
    // 删除某个元素时
    handleWidgetDelete (index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {}
        } else {
          this.selectWidget = this.data.list[index - 1]
        }
      } else {
        this.selectWidget = this.data.list[index + 1]
      }
      this.$nextTick(() => {
        this.data.list.splice(index, 1)
      })
    },
    // 对象数组排序
    orderByObjAttr (key) {
      return function (val1, val2) {
        return val1[key] - val2[key]
      }
    }
  },
  watch: {
    select (val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler (val) {
        this.$emit('update:select', val)
      },
      deep: true
    },
    element: { // 监听元素改变时
      handler (val) {
        if (val.type.indexOf('echarts_') !== -1) {
          this.$nextTick(() => {
            this.$refs[val.model].updateEchartsSize()
          })
        }
      },
      deep: true
    }
  }
}
